<script>
const _data = {
    "第3年": {
        "5年缴": {
            "入账实时活动[复制]": "null",
            "基础服务费": "20"
        },
        "10年缴": {
            "入账实时活动[复制]": "null",
            "基础服务费": "22"
        }
    },
    "首年": {
        "10年,15年,20年缴": {
            "入账实时活动[复制]": "15",
            "基础服务费": "7"
        },
        "5年缴": {
            "入账实时活动[复制]": "13",
            "基础服务费": "3"
        }
    },
    "次年": {
        "15年缴": {
            "入账实时活动[复制]": "null",
            "基础服务费": "16"
        },
        "5年,10年缴": {
            "入账实时活动[复制]": "null",
            "基础服务费": "12"
        }
    }
}
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
      return {}
    },
  render() {
    return (
      <table>
        <thead>
          <tr>
            <td class="td">保单年度</td>
            <td class="td">缴费年限</td>
            <td class="td">基础服务</td>
            <td class="td">入账实时活动</td>
          </tr>
        </thead>
        <tbody>
        {Object.keys(_data).map(key => {
          const _item = _data[key];
          return(
            <tr key={1} class="list">
              <td class="td">{key}</td>
              <td colspan="4">
                {Object.keys(_item).map(_k => {
                  const _sItem = _item[_k];
                  return <dl class="dl">
                    <dt class="td">{_k}</dt>
                    <dd class="dd">
                      <ul class="ul">
                        <li class="dd">
                        {Object.keys(_sItem).map((_s) => {
                          const _cItem = _sItem[_s]
                          return <div class="td">{_cItem !== 'null' ?  _cItem : '/'}</div>
                        })}
                        </li>
                      </ul>
                    </dd>
                  </dl>
                })}
              </td>
            </tr>
          )
        })}
        </tbody>
      </table>
    );
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
  position: relative;
  font-family: "SF Pro Display",Roboto,Noto,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size: 14px;
  line-height: 1.57142857;
  background-color: #f5f6f7;
  color: #333;
  min-height: 100%;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
}
a {
  color: #42b983;
}

* {
  padding: 0;
  margin: 0;
  margin-block-end: 0;
  margin-block-start: 0;
}

table {
  margin: 100px auto;
  border-collapse: collapse;
  width: 1000px;
  border: 1px solid #ddd;
  ;
}

.td {
  width: 230px;
  padding: 10px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.dl,
.dd {
  display: flex;
  line-height: 30px;
}

.dd .td:last-child{
  border-right:none;
}
.list:last-child .dl:last-child .td{
  border-bottom:none;
}
</style>
